<template>
	<view class="module flex_ZC">
		<!-- #ifdef H5 -->
			<uNavbar title="商家入驻"> </uNavbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="custom_box">
			<image class="indexbg" :src="baseUrl + '/static/image/indexbg.png'" mode="aspectFill"></image>
			<view :style="{height: statusBarHeight + 'px', backgroundColor: backgroundColor }"></view>
			<view class="custom_nav " :style="{height: titleHeight + 'px', backgroundColor: backgroundColor}">
				<image class="goback" :src="baseUrl +'/static/icon/i_left.png'" mode="aspectFill" @click="leftClick"></image>
				<text class="f28 c3">入驻福叠猫</text>
			</view>
		</view>
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<view class="information_txt flex_Z">
			<text class="f48 c3 fw7">签署协议</text>
		</view>
		
		<view class="agreement flex_ZC">
			<view class="agreement_box line flex_ld"  @click="goRead('agree1')">
				<text class="f28 c3">阅读并同意《福叠猫商户入驻合同》</text>
				<view class=" flex_dq">
					<text :class="agree1?'agree':'refuse'">{{agree1?'已同意':'去阅读'}}</text>
					<u-icon name="arrow-right" color="#999999" size="15"></u-icon>
				</view>
			</view>
<!-- 			<view class="agreement_box line flex_ld"  @click="goRead('agree2')">
				<text class="f28 c3">阅读并同意《福叠猫服务协议》</text>
				<view class=" flex_dq">
					<text :class="agree2?'agree':'refuse'">{{agree2?'已同意':'去阅读'}}</text>
					<u-icon name="arrow-right" color="#999999" size="15"></u-icon>
				</view>
			</view>
			<view class="agreement_box flex_ld"  @click="goRead('agree3')">
				<text class="f28 c3">阅读并同意《福叠猫服务协议》</text>
				<view class=" flex_dq">
					<text :class="agree3?'agree':'refuse'">{{agree3?'已同意':'去阅读'}}</text>
					<u-icon name="arrow-right" color="#999999" size="15"></u-icon>
				</view>
			</view> -->
		</view>


		<view class="btns flex_ld"> 
			<text class="sign_out" @click="leftClick">上一步</text>
			<view class="service flex_dq">
				<text class="service1" v-if="allAgree"   @click="nextStep">完成</text>
				<text class="service2" v-else @click="nextStep">完成</text>
			</view>
		</view>
		<view class="empty3"></view>

	</view>
</template>

<script> 
	import {settledThreeSave} from "../../api/join.js"
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				titleHeight: 0, // 标题栏高度
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				
				sellerId:'',
				agree1:false,
				agree2:false,
				agree3:false,
				allAgree:false

			}
		},
		
		onReady() {
			// #ifdef MP-WEIXIN 
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
					console.log(this.statusBarHeight);
				}
			})
			const custombar = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (custombar.top - this.statusBarHeight) * 2 + custombar.height
			console.log(this.titleHeight);
			// #endif

		},
		onLoad() {

		},
		onShow() {
			console.log('协议1---',uni.getStorageSync('agree1'));
			console.log('店铺id---',uni.getStorageSync('sellerId'));
			// console.log('协议2---',uni.getStorageSync('agree2'));
			// console.log('协议3---',uni.getStorageSync('agree3'));
			this.agree1 = uni.getStorageSync('agree1')
			// this.agree2 = uni.getStorageSync('agree2')
			// this.agree3 = uni.getStorageSync('agree3')
			this.sellerId = uni.getStorageSync('sellerId')
			
			// if(this.agree1 && this.agree2 && this.agree3){
			if(this.agree1){
				this.allAgree = true
			}else{
				this.allAgree = false
			}
		},
		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 去阅读
			goRead(type){
				console.log(type);
				uni.navigateTo({
					url: '/pagesMy/businessJoin/agreement?type=' + type
				})
			},
			// 完成
			nextStep() {
				if(this.allAgree){
					let data = {
						seller_id:this.sellerId,
						settled_agreement:this.agree1,
					}; 
					console.log(data);
					settledThreeSave(data).then(res=>{
						console.log(res);
						if(res.code == 1){
							uni.navigateTo({
								url: '/pagesMy/businessJoin/submitInformation'
							})
						}
					})
				}else{
					uni.$u.toast('请阅读并同意全部协议~')
				}
				
			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		padding-bottom: 10rpx;
		opacity: 1;
	}
	
	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 260rpx;
	}
	
	.custom_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		font-size: 36rpx;
		z-index: 9;
		color: #FFFFFF;
	}
	
	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
	}

	.information_txt {
		width: 686rpx;
		padding: 16rpx 0;
	}
	.agreement{
		position: relative;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 14rpx;
		margin-top: 40 rpx;
		z-index: 9;
	}
	.agreement_box{
		width: 638rpx;
		height: 124rpx;
		z-index: 9;
	}
	.line{
		border-bottom: 1rpx solid  rgba(0,0,0,0.04);
	}
	.refuse{
		font-size: 20rpx;
		color:#999999;
	}
	.agree{
		font-size: 20rpx;
		color:#FFCC28 !important;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service1 {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}
	.service2 {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 500;
		text-align: center;
		background: #CBCBCB;
		border-radius: 20rpx;
	}

</style>